<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h4>查询数据</h4>
    <form>
        日期：<input name="datafile" type="date" v-model="date1"/>
        至：<input name="datafile" type="date" v-model="date2"/>
        <button @click.prevent = "fquery(date1,date2)">查&nbsp;&nbsp;询</button>
    </form>
    <table cellspacing="0" cellpadding="0" border="1">
        <tr>
            <th>日期</th>
            <th>红1</th>
            <th>红2</th>
            <th>红3</th>
            <th>红4</th>
            <th>红5</th>
            <th>红6</th>
            <th>蓝球</th>
            <th>销量</th>
            <th>头等奖</th>
            <th>二等奖</th>
        </tr>
        <tr v-for="jilu in list">
            <th>{{jilu.opendate}}</th>
            <th>{{jilu.redone}}</th>
            <th>{{jilu.redtwo}}</th>
            <th>{{jilu.redthree}}</th>
            <th>{{jilu.redfour}}</th>
            <th>{{jilu.redfive}}</th>
            <th>{{jilu.redsix}}</th>
            <th>{{jilu.blue}}</th>
            <th>{{jilu.sale}}</th>
            <th>{{jilu.firstprize}}</th>
            <th>{{jilu.secondeprize}}</th>
        </tr>
        <tr>
            <td colspan="8">合计</td>
            <td>44,234,545</td>
            <td>4</td>
            <td>1,241</td>
        </tr>
    </table>
    <div id="pages">

    </div>
</div>
<script>
    var list = [];
    var jilu = {};
    var vue = new Vue({
        el: "#app",
        data: {
            list : [],
            jilu: {},
            date1: "",
            date2: "",
            count: ""
        },

        methods:{
            fquery(date1,date2){
                this.query(date1,date2,1)
                axios({
                    method: 'post',
                    url: "count.do",
                    params: {
                        date1: date1,
                        date2: date2,
                    }
                }).then((res) => {
                    count = res.data;
                    console.log(res.data)
                    console.log(count + "总条数")
                });
            },
            query(date1,date2,pnum){
                console.log(date1+"日期1");
                console.log(date2+"日期2");
                axios({
                    method: 'post',
                    url: "query.do",
                    params: {
                        date1: date1,
                        date2: date2,
                        pnum : pnum
                    }

                }).then((res) => {

                    this.list = res.data;
                    console.log(this.list)
                });
            }
        }
    });
</script>
</body>
</html>

<style>
    html,
    body {
        height: 100%;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        color: #333;
    }

    #app {
        margin: 50px;
    }

    form {
        text-align: right;
        display: inline-block;
    }

    input {
        width: 200px;
    }

    button {
        padding: 0px 20px;
    }

    form {
        margin: 10px 0px;
    }

    table {
        width: 100%;
        border-spacing: 0px;
    }

    th, td {
        padding: 3px;
    }

    td {
        text-align: right;
    }

    th {
        background-color: aqua
    }

    td:nth-child(1) {
        text-align: center;
    }

    #pages {
        padding: 10px;
        text-align: right;
    }

    #pages > span {
        background-color: #ddd;
        margin: 2px;
        padding: 2px 5px;
        border-radius: 2px;
        min-width: 15px;
        display: inline-block;
        text-align: center;
        cursor: pointer;
    }

    #pages > span.current {
        background-color: #aaa;
    }

    #pages > span:hover {
        background-color: beige;
        color: green;
    }

</style>
